<template>
  <van-list>
    <div v-for="(item, index) in listItems" :key="index">
      <!--分区-->
      <div :class='[{"section": index != listItems.length - 1}]'>
        <!--每个分区下的cell-->
        <li class="cell" v-for="(sectionItem, sectionIndex) in item.data" :key="sectionIndex" @click="cellClicked(sectionItem)">
          <div class="cell-left">
            <!--左边icon-->
            <img class="cell-icon" v-if="sectionItem.icon && sectionItem.icon.length > 0" :src="sectionItem.icon" alt="">
            <!--icon旁边标题-->
            <div class="cell-title">{{sectionItem.title}}</div>
          </div>
          <!--向右箭头 可隐藏-->
          <img class="right-arrow" v-show="!sectionItem.hideArrow" src="../../assets/right_arrow_gray_16x16.png">
        </li>
      </div>
    </div>
  </van-list>
</template>

<script>
// icon 标题 向右箭头 描述文案通用cell
import {showToast} from "vant";

export default {
  name: "AppTitleArrowCell",
  props:{
    // 对外属性 类型为数组 默认值为空数组
    listItems:{
      type: [Array],
      default: () => []
    },
  },
  data() {
    return {

    }
  },
  beforeCreate() {

  },
  setup() {

  },
  created() {

  },
  mounted() {

  },
  methods:{
    /**
     * cell点击
     * @param item
     */
    cellClicked(item) {
      showToast(item.title)
      // 事件传递：组件自定义事件分发 交给父视图去实现
      this.$emit('cellClicked', item)
    },
  }
}
</script>

<style scoped>
.cell  {
  background-color: white;
  display: flex;
  padding: 15px;
  box-sizing: border-box;
  justify-content: space-between;
  border-bottom: 1px solid #f4f5f6;
}

.section {
  margin-bottom: 7px;
}

.cell-left {
  display: flex;
}

.right-arrow {
  width: 16px;
  height: 16px;
  display: block;
  margin: auto 0;
  vertical-align: center;
}

.cell-title {
  font-size: 14px;
  color: #131313;
  text-align: left;
}

.cell-icon {
  width: 20px;
  height: 20px;
  display: block;
  margin: auto 0 auto 10px;
}
</style>
